<template>
    <el-dialog
        v-model="data.dialogConfig.dialogVisible"
        v-if="data.dialogConfig.dialogVisible"
        :title="data.dialogConfig.title ? data.dialogConfig.title : '弹窗'"
        :width="data.dialogConfig.width ? data.dialogConfig.width : '500px'"
        :before-close="handleClose"
        :destroy-on-close="true"
    >
        <span v-if="type === 'form'">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rulesTrue ? rules : null"
                :label-width="labelWidth ? labelWidth : '120px'"
                class="demo-ruleForm"
                size="default"
                status-icon
            >
                <el-form-item v-for="item in formOptions" :key="item.label" :label="item.label" :prop="item.prop">
                    <span v-if="item.type === 'input'">
                        <el-input
                            v-model="ruleForm[item.prop]"
                            :placeholder="item.placeholder"
                            :style="item.style"
                            :type="item.inputType"
                        />
                    </span>
                    <span v-if="item.type === 'selete'">
                        <el-select v-model="ruleForm[item.prop]" :placeholder="item.placeholder" :style="item.style">
                            <el-option
                                v-for="seleteItem in item.seleteOptions"
                                :key="seleteItem[item.config.value]"
                                :label="seleteItem[item.config.label]"
                                :value="seleteItem[item.config.value]"
                            />
                        </el-select>
                    </span>
                    <span v-if="item.type === 'date'">
                        <el-date-picker
                            v-model="ruleForm[item.prop]"
                            :type="item.config.dateType"
                            :placeholder="item.placeholder"
                            :style="item.style"
                            :value-format="item.config.valueFormat"
                        />
                    </span>
                    <span v-if="item.type === 'switch'">
                        <el-switch v-model="ruleForm[item.prop]" />
                    </span>
                    <span v-if="item.type === 'checkbox'">
                        <el-checkbox-group v-model="ruleForm[item.prop]">
                            <el-checkbox
                                v-for="checkboxItem in item.checkboxOptions"
                                :label="checkboxItem[item.config.label]"
                            />
                        </el-checkbox-group>
                    </span>
                    <span v-if="item.type === 'radio'">
                        <el-radio-group v-model="ruleForm[item.prop]">
                            <el-radio
                                v-for="radioItem in item.radioOptions"
                                :label="radioItem[item.config.label]"
                                :model-value="radioItem[item.config.value]"
                            />
                        </el-radio-group>
                    </span>
                    <span v-if="item.type === 'upload'">
                        <UploadCpn :uploadConfig="item.config" :prop="item.prop" @getUrl="getUrl" />
                    </span>
                </el-form-item>
            </el-form>
        </span>
        <!-- <slot :row="dialogData"></slot> -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="data.dialogConfig.dialogVisible = false">{{
                    data.dialogConfig.falseBtnText ? data.dialogConfig.falseBtnText : '取消'
                }}</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    {{ data.dialogConfig.trueBtnText ? data.dialogConfig.trueBtnText : '确定' }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, toRefs, watch, ToRef } from 'vue';
import { ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import UploadCpn from '../upload/index.vue';
import { log } from 'console';

let props = defineProps(['dialogConfig', 'dialogData', 'dialogOptions']);
let emit = defineEmits(['submitDialog']);
let { type, rulesTrue, labelWidth, formOptions } = toRefs(props.dialogOptions);
let beforeData = props.dialogConfig.beforeData;
function handleClose(done: () => void): void {
    if (props.dialogConfig.beforeClose) {
        ElMessageBox.confirm(beforeData.title, {
            confirmButtonText: beforeData.trueBtnText,
            cancelButtonText: beforeData.falseBtnText,
            type: beforeData.type ? beforeData.type : 'warning'
        })
            .then(() => {
                done();
            })
            .catch(() => {
                // catch error
            });
    } else {
        done();
    }
}
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({ ...props.dialogOptions.rules });
const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`
}));
interface dataType {
    ruleForm: {
        [key: string]: string | boolean | any;
    };
    dialogConfig: any;
}
const data: dataType = reactive({
    ruleForm: {},
    dialogConfig: {}
});
let { ruleForm } = toRefs(data);
watch(
    () => props.dialogData,
    (newData, newOld) => {
        data.ruleForm = { ...props.dialogData };
    }
);
watch(
    () => props.dialogConfig,
    (newData, newOld) => {
        data.dialogConfig = { ...newData };
    },
    {
        deep: true
    }
);
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (props.dialogOptions.rulesTrue) {
            if (valid) {
                submitDialog(data.ruleForm);
            } else {
                console.log('error submit!', fields);
            }
        } else {
            submitDialog(data.ruleForm);
        }
    });
};
function submitDialog(row: any): void {
    let options = {
        title: data.dialogConfig.title,
        row
    };
    emit('submitDialog', options);
}
// interface urlType {
//     [key: string]: object;
// }
let propValue: ToRef<any> = ref('');
// 元素隐式具有 "any" 类型，因为类型为 "any" 的表达式不能用于索引类型 "Ref<{ [key: string]: any; }>"。
function getUrl(urlInfo: any) {
    propValue.value = urlInfo.prop;
    data.ruleForm[propValue.value] = urlInfo.url;
}
</script>

<style scoped></style>
